<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
  <script src="./bootstrap-3.3.7-dist/js/jquery-3.1.1.js"></script>
  <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <script src="./bootstrap-3.3.7-dist/js/jquery.cookie.js"></script>
  <link rel="stylesheet" href="./css/header.css">
</head>

<body>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">{{title}}</a>
      </div>
      <div class="navbar-right">
        <ul class="nav navbar-nav">
          {{if title!='添加书籍'&&title!= '修改书籍'}}
          <li class="search">
            <input type="text">
            <i class="glyphicon glyphicon-search" data-title="{{title}}"></i>
          </li>
          {{/if}}
          <li class="userstate dropdown" data-target="#myModal">
            <span class="dropdown-toggle" id="dropdownMenu1">
              <i class="glyphicon glyphicon-user"></i>
              <span>登录</span>
            </span>

            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" class="outlogin">退出登录</a>
              </li>
            </ul>
          </li>
          <li class="shopCar">
            <i class="glyphicon glyphicon-shopping-cart"></i>
            <span>购物车</span>
          </li>
          <li class="book" style="display: none;">
            <i class="glyphicon glyphicon-book "></i>
            <span>书籍管理</span>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">登录</h4>
        </div>
        <div class="modal-body">
          <form action="" class="form-horizontal login">
            <div class="form-group">
              <label for="" class="col-sm-2 control-label">用户名：</label>
              <div class="col-sm-9">
                <input type="text" name="username" id="" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-2 control-label">密码：</label>
              <div class="col-sm-9">
                <input type="text" name="psw" id="" class="form-control">
              </div>
            </div>
            <div class="form-group" style="text-align: center;">
              <button class="btn btn-success" style="width: 100px;">登录</button>
              <button type="button" class="btn btn-primary register"
                style="width: 100px; margin-left: 15px;">注册</button>
            </div>

          </form>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

  <!-- 消息模态框（Modal） -->
  <div class="modal fade showinfo" id="showinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">结果</h4>
        </div>
        <div class="modal-body">

        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>
  <script>
    $('.register').click(function () {
      location.href = '/register'
    })

    var username = $.cookie('username')

    if (username) {
      $('.userstate').removeAttr('data-toggle').find('span').text(username)
      if (username == 'admin') {
        $('.book').show().prev().hide()

      } else {
        $('.book').hide().prev().show()
      }
      $('.dropdown').children().eq(0).attr('data-toggle', 'dropdown')
    } else {
      $('.userstate').attr('data-toggle', 'modal').find('span').text('登录')

    }

    // 登录提交
    $('.login').submit(function (e) {
      e.preventDefault()
      var username = $(this).find('input').eq(0).val()
      $.post('/login', $(this).serialize(), data => {
        $('#myModal').modal('hide')
        $('#showinfo').modal('show').find('.modal-body').text(data.msg)
        $('#showinfo').on('hide.bs.modal', function () {
          if (data.code == 1) {
            var now = new Date()
            now.setMonth(now.getMonth() + 1)
            $.cookie('username', username, {
              expires: now
            })
            location.href = '/'
          } else if (data.code == 0) {
            location.href = '/register'
          }
          $('.login input').val('')
        })

      })
    })

    $('.book').click(function () {
      location.href = '/marangebook'
    })

    // 搜索
    $('.search i').click(function () {
      // 获取到搜索关键字
      var keyword = $(this).prev().val()
      location.href = '/sreach?keyword=' + keyword + '&title=' + this.dataset.title

    })

    // 退出登录
    $('.outlogin').click(function (e) {
      e.preventDefault()
      $.removeCookie('username')
      $('#showinfo').modal('show').find('.modal-body').text('退出登录')
      $('#showinfo').on('hide.bs.modal', function () {
        location.href='/'
      })
    })

    $('.shopCar').click(function () {
      if (username) {
        location.href = '/carpage?username=' + username
      } else {
        $('#showinfo').modal('show').find('.modal-body').text('请先登录')
        $('#showinfo').on('hide.bs.modal', function () {
          $('#myModal').modal('show')
        })
      }
    })
  </script>